﻿@model CourseDetailModel
@{
    ViewData["Title"] = "教学计划信息";

    var duration = Model.Course.Lessons.OrderByDescending(n => n.Sequence).Select(n => n.Duration).FirstOrDefault();

    //var finalBeginTime = Model.TeachingPlanItems.OrderByDescending(n => n.BeginTime).Select(n => n.BeginTime).FirstOrDefault();

    //var endDate = finalBeginTime.AddMinutes(duration);
    var bookingcount = 0;
    var i = 0;
}

@section Styles{
    <!-- Plugins css -->
    <link href="~/assets/libs/nestable2/jquery.nestable.min.css" rel="stylesheet" />
    <style>
        .course_img {
            width: 100%;
            height: 100%;
            max-width: 550px;
            max-height: 200px;
            margin: auto 0;
        }

        .card-box {
            margin-bottom: 10px;
        }

        .notification {
            border: dashed 1px solid;
            border-radius: 4px;
            background-color: #4fc6e1;
            padding: 10px;
            margin-bottom: 10px;
        }

        .col-8 {
            padding-right: 0;
        }

        .dd {
            max-width: unset;
        }

        .hide {
            display: none;
        }

        .dd-list .dd3-content {
            padding: 8px 0px 8px 0px !important;
        }

        .dd-empty, .dd-item, .dd-placeholder {
            font-size: 10px;
        }

        .booking {
            color: #fff;
            height: 30px;
            width: 100px;
            position: absolute;
            right: -25px;
            top: 10px;
            overflow: hidden;
            text-align: center;
            line-height: 30px;
            background-color: #FF5722;
            -moz-transform: rotate(45deg);
            -webkit-transform: rotate(45deg);
            -o-transform: rotate(45deg);
            -ms-transform: rotate(45deg);
            transform: rotate(45deg);
        }
    </style>

}
@functions {

    public string showStatus(int status)
    {
        if (status == 0)
        {
            return "未开始";
        }
        else if (status == 1)
        {
            return "进行中";
        }
        else if (status == 2)
        {
            return "完成";
        }
        else
        {
            return "未知";
        }
    }

    public string getAvatar(OnlineEducation.Data.Entities.ApplicationUser teacher)
    {
        if (string.IsNullOrEmpty(teacher.avatar))
        {
            if (teacher.Gender == 1)
            {
                return "~/assets/images/users/default_male.jpg.jpg"; ;
            }
            else
            {
                return "~/assets/images/users/default_female.jpg.jpg";
            }
        }
        else
        {
            return teacher.avatar;
        }
    }

}

<!-- Start Content-->
<div class="container-fluid">
    <!-- start page title -->
    <div class="row">
        <div class="col-12">
            <div class="page-title-box">
                <div class="page-title-right">

                    <ol class="breadcrumb m-0">
                        <li class="breadcrumb-item"><a href="javascript: void(0);"><i class="fa fa-map-marker-alt"></i></a></li>
                        <li class="breadcrumb-item"><a href="javascript: void(0);">课程信息</a></li>
                        <li class="breadcrumb-item active">/</li>
                    </ol>
                </div>
                <h4 class="page-title">课程信息</h4>
            </div>
        </div>
    </div>
    <!-- end page title -->
    <div class="card-box">
        <div class="row">

            <div class="col-md-5 col-xl-5 col-xs-12 col-sm-12">
                @{
                    var url = @Model.Course.CoverPictureURL;

                    if (string.IsNullOrEmpty(url))
                    {
                        //   url = "~/assets/images/course/66.jpg";
                    }
                }
                <img src="@url" class="course_img" />
            </div>

            <div class="col-md-7 col-xl-7 col-xs-12 col-sm-12">
                <h4 class="title text-dark">@Model.Course.Title</h4>
                <p class="subtitle">@Model.Course.SubTitle</p>
                <p class="price">价格: ￥@Model.Course.Price</p>
                <p class="status">状态: @showStatus(Model.Course.Status)</p>
                <p class="teaching_peroid">授课时间: @Model.Course.Lessons.Min(r => r.UpdatedTime).ToString("yyyy-MM-dd HH:mm") - @Model.Course.Lessons.Max(r => r.UpdatedTime).ToString("yyyy-MM-dd HH:mm")</p>

                @*<button id="btnbooking" type="button" class="btn btn-primary  waves-effect waves-light float-left ladda-button mr-2 mt-2" data-style="expand-left">
                        <span>预定此课程</span>
                    </button>*@
            </div>

        </div>
    </div>

    <div class="row">

        <div class="col-xl-8 col-xs-12 col-sm-12">
            <div class="card-box">
                <ul class="nav nav-tabs nav-bordered">
                    <li class="nav-item">
                        <a href="#course-intro" data-toggle="tab" aria-expanded="false" class="nav-link active">
                            课程介绍
                        </a>
                    </li>
                    <li class="nav-item">
                        <a href="#course-eval" data-toggle="tab" aria-expanded="true" class="nav-link">
                            课程评价(@Model.EvaluationCount)
                        </a>
                    </li>

                </ul>
                <div class="tab-content">
                    <div class="tab-pane show active" id="course-intro">
                        <p>@Html.Raw(Model.Course.Description)</p>
                    </div>
                    <div class="tab-pane" id="course-eval">
                        @foreach (var comment in Model.TeachingPlans.SelectMany(r => r.Evaluations))
                        {
                            <div class="panel panel-default">
                                <div class="panel-body">
                                    <div class="media" id="comment-@comment.Id">
                                        <div class="media-left mr-1">
                                            <img class="media-object  avatar-lg rounded-circle img-author-logo img-author-logo-sm" src="~/assets/images/users/empty-profile.png" alt="User Avatar">
                                        </div><!-- /.media-left -->
                                        <div class="media-body">
                                            <h5 class="media-heading">
                                                <strong>@comment.CreatedBy</strong>
                                                <span class="text-muted font-small">@DateHelper.ToPrettyDate(comment.CreatedTime)</span>

                                            </h5>
                                            <p>
                                                @comment.Content
                                            </p>
                                        </div><!-- /.media-body -->
                                    </div><!-- /.media -->
                                </div><!-- /.panel-body -->


                            </div><!-- /.panel -->
                        }
                        <div class="pull-right">
                        </div>
                        <div class="clearfix"></div>
                        @*<hr>
                            <h6 id="post-new-comment">发表评论</h6>

                            <form action="/" method="post" onsubmit="if (!$('#comment').val()) {$('.help-block').removeClass('hide'); return false; }">

                                <div class="form-group">
                                    <p class="help-block hide">评论不能为空.</p>
                                    <textarea class="form-control" id="comment" name="comment"></textarea>
                                </div>
                                <div class="form-group">
                                    <button type="submit" class="btn btn-primary">发表评论</button>
                                </div>
                            </form>*@
                    </div>

                </div>
            </div>
            <div class="card-box">
                <ul class="nav nav-tabs nav-bordered">
                    <li class="nav-item">
                        <a href="#home-b3" data-toggle="tab" aria-expanded="true" class="nav-link active">
                            授课安排
                        </a>
                    </li>

                </ul>
                <div class="tab-content">
                    <div class="row">


                        @foreach (var teachplan in Model.TeachingPlans.OrderByDescending(n => n.BeginTime))
                        {
                            <div class="col-xl-12 order-xl-1 order-2 card-box" style="overflow: hidden;">
                                @{
                                    bookingcount = teachplan.StudentPlanCount - Model.Bookings.Where(r => r.TeachingPlanId == teachplan.Id).Count();
                                }
                                <div class="row align-items-center">
                                    @{
                                        var myTeachingPlans = ViewBag.MyTeachingPlans as List<OnlineEducation.Data.Entities.TeachingPlan>;

                                        if (myTeachingPlans.Any(n => n.Id == teachplan.Id))
                                        {
                                            <div class="booking">
                                                已预订
                                            </div>
                                        }
                                    }
                                    <div class="col-sm-6">
                                        <div class="media">
                                            <div class="media-body">

                                                <h4 class="mt-0 mb-2 font-16">@teachplan.Name</h4>
                                                <p class="p-0"><b>教学时间: </b>@teachplan.BeginTime.ToString("yyyy-MM-dd") - @teachplan.EndTime.ToString("yyyy-MM-dd")</p>
                                                <p class="p-0"><b>招生人数: </b>@teachplan.StudentPlanCount</p>
                                                <p class="p-0"><b>剩余名额: </b>@bookingcount</p>
                                                <div class="text-left mt-3 mt-sm-0">
                                                    @if (teachplan.EndTime <= DateTime.Today)
                                                    {
                                                        <div class="badge btn btn-xs btn-warning">
                                                            已结束
                                                        </div>

                                                    }
                                                    else if (bookingcount == 0)
                                                    {
                                                        <div class="badge btn btn-xs btn-danger">
                                                            满员
                                                        </div>
                                                    }
                                                    else
                                                    {
                                                        <div class="badge btn btn-xs btn-info">
                                                            报名中
                                                        </div>
                                                    }
                                                </div>
                                            </div>
                                        </div>
                                    </div>


                                    <div class="col-sm-3">
                                        <div class="text-left mt-3 mt-sm-0">


                                            @if (teachplan.EndTime >= DateTime.Today)
                                            {
                                                

                                                if (!myTeachingPlans.Any(n => n.Id == teachplan.Id))
                                                {
                                                    <button id="btnbooking" type="button" class="btn btn-primary" data-style="expand-left" onclick="orderTeachPlan(@teachplan.Id)">
                                                        <span>预定此课程</span>
                                                    </button>
                                                }
                                            }
                                            


                                        </div>

                                    </div>
                                    <div class="col-sm-3">
                                        <div class="text-left mt-3 mt-sm-0">
                                            @if (teachplan.TeachingPlanItems == null || teachplan.TeachingPlanItems.Count == 0)
                                            {
                                                <div class="badge font-14 bg-soft-primary text-primary p-1">
                                                    无课时
                                                </div>
                                            }
                                            else
                                            {
                                                <button class="btn btn-outline-primary" onclick="showPlan(@i)">
                                                    查看课时
                                                </button>
                                            }
                                        </div>

                                    </div>


                                </div>

                                @*显示具体的planItem*@

                                <ol class="dd-list mt-2" style="display:none" id="plann_@i">
                                    @foreach (var sec in teachplan.TeachingPlanItems)
                                    {
                                        <li class="dd-item dd3-item" data-id="@sec.Lesson.Section">
                                            <div class="dd-handle dd3-handle"></div>
                                            <div class="dd3-content">
                                                <div class="row">
                                                    <div class="col-xl-3 col-md-3 d-none d-sm-block">
                                                        第 @sec.Lesson.Chapter 章 第 @sec.Lesson.Section 节
                                                    </div>
                                                    <div class="col-xl-4  col-xs-12">
                                                        @sec.Lesson.Title
                                                    </div>
                                                    <div class="col-xl-3 col-md-3  d-sm-block">
                                                        上课时间：@sec.BeginTime.ToString("yyyy-MM-dd HH:mm")
                                                    </div>
                                                    <div class="col-xl-2 text-center col-md-1  d-none d-sm-block">
                                                        <a href="@sec.Lesson.MaterialURLs" target="_blank">课件</a>
                                                    </div>
                                                </div>
                                            </div>
                                        </li>
                                    }
                                </ol>




                            </div>
                            i++;
                        }
                    </div>

                </div>
            </div>


        </div>

        <div class="col-xl-4 col-xs-12 col-sm-12">

            <div class="card-box">
                <ul class="nav nav-tabs nav-bordered">
                    <li class="nav-item">
                        <a href="#home-b3" data-toggle="tab" aria-expanded="true" class="nav-link active">
                            授课教师
                        </a>
                    </li>

                </ul>
                <div class="tab-content">
                    <div class="media mb-3">
                        <img class="d-flex mr-3 mt-2 rounded-circle avatar-lg" src="~/assets/images/users/user-8.jpg" alt="Generic placeholder image">
                        <div class="media-body">
                            <h4 class="mt-0 mb-1">@Model.Course.Teacher.FullName</h4>
                            <p class="text-muted">@Model.Course.Teacher.Title</p>
                            <p class="text-muted"><i class="mdi mdi-feather"></i> @Model.Course.Teacher.Signature Life is good.</p>

                            <a href="javascript: void(0);" class="btn- btn-xs btn-info"><i class="mdi mdi-email-outline"></i> 发邮件</a>
                            <a href="javascript: void(0);" class="btn- btn-xs btn-secondary"><i class="mdi mdi-heart-outline"></i> 收藏</a>

                        </div>
                    </div>

                    <h5 class="mb-3 mt-4 text-uppercase bg-light p-2"><i class="mdi mdi-account-circle mr-1"></i> 个人信息</h5>
                    <div class="">
                        <h4 class="font-13 text-muted text-uppercase">简介 :</h4>
                        <p class="mb-3">
                            @Model.Course.Teacher.Intro
                        </p>

                        <h4 class="font-13 text-muted text-uppercase mb-1">生日 :</h4>
                        <p class="mb-3">@Model.Course.Teacher.BirthDate March 23, 1984 (34 Years)</p>

                        <h4 class="font-13 text-muted text-uppercase mb-1">地址 :</h4>
                        <p class="mb-3"> @Model.Course.Teacher.Address</p>

                        <h4 class="font-13 text-muted text-uppercase mb-1">QQ :</h4>
                        <p class="mb-3"> @Model.Course.Teacher.QQ</p>

                        <h4 class="font-13 text-muted text-uppercase mb-1">Wechat :</h4>
                        <p class="mb-3"> @Model.Course.Teacher.WeChat</p>

                        <h4 class="font-13 text-muted text-uppercase mb-1">Weibo :</h4>
                        <p class="mb-3"> @Model.Course.Teacher.Weibo</p>

                        <h4 class="font-13 text-muted text-uppercase mb-1">最后更新 :</h4>
                        <p class="mb-0"> @Model.Course.Teacher.CreatedTime</p>

                    </div>

                </div> <!-- end card-box-->

            </div>
        </div>
    </div>
</div>
<!-- end row -->


<div id="modalDefault" class="modal fade" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true" style="display: none;">
    <div class="modal-dialog">
        <div class="modal-content">

        </div>
    </div>
</div><!-- /.modal -->
@section Scripts{
    @await Html.PartialAsync("_ValidationScriptsPartial")

    <script src="~/assets/libs/moment/moment.min.js"></script>

    <!-- Plugins js-->
    <script src="~/assets/libs/nestable2/jquery.nestable.min.js"></script>
    <script>



        var table;

        $(function () {

            $("#nestable_list_lesson").nestable();
        });


        function showPlan(i) {
            var style = document.getElementById("plann_" + i).style.display;
            if (style == "block") {
                document.getElementById("plann_" + i).style.display = "none";
            }
            if (style == "none") {
                document.getElementById("plann_" + i).style.display = "block";
            }
        }


        function SubmitForm(form, url) {
            $(form).removeData('validator');
            $(form).removeData('unobtrusiveValidation');
            $.validator.unobtrusive.parse(form);
            if ($(form).valid()) {
                var data = $(form).serializeJSON();
                data = JSON.stringify(data);



            }
            return false;
        }

        //function Remove(id) {
        //    Swal.fire({
        //        title: "删除",
        //        text: "确定删除?",
        //        type: "warning",
        //        showCancelButton: true,
        //        confirmButtonColor: "#dd4b39",
        //        confirmButtonText: "是的，删除!",
        //        cancelButtonText: "取消",

        //    }).then(function () {
        //        $.ajax({
        //            type: 'POST',
        //            url: '/Course/Delete/' + id,
        //            success: function (data) {
        //                if (data.success) {
        //                    ShowMessage(data.message);
        //                    setTimeout(function () {
        //                        window.location.href = "/Course/Index";
        //                    }, 2000);
        //                } else {
        //                    ShowMessageError(data.message);
        //                }
        //            }
        //        });
        //    });


        //}

        //function UpdateStatus(id) {
        //    $.ajax({
        //        type: 'POST',
        //        url: '/Course/ChangeStatus/' + id,
        //        success: function (data) {
        //            if (data.success) {
        //                ShowMessage(data.message);
        //                setTimeout(function () {
        //                    window.location.href = "/Course/Index";
        //                }, 2000);
        //            } else {
        //                ShowMessageError(data.message);
        //            }
        //        }
        //    });



        //}

        function orderTeachPlan(teachplanId) {
            $.ajax({
                type: 'POST',
                url: '/Booking/Add',
                data: 'id=' + teachplanId,
                success: function (data) {
                    if (data.success) {
                        ShowMessage(data.message, function () {
                            window.location.href = "/Home/Index";
                        });
                    } else {
                        ShowMessageError(data.message);
                    }
                }
            });
        }
    </script>
}
